iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
Modern Web

為期 30 天的 react 大冒險系列 第 12

react 大冒險-屬於 React 的開發者工具-day 11

  • 分享至 

  • xImage
  •  

為了讓開發 react 專案的過程更加輕鬆
可以安裝 react developer tool 這個專屬react的開發小工具
react developer tool 點此安裝


安裝完畢後,在瀏覽器的擴充工具欄裡面會出現 react developer tool 的圖示
可以辨認當下開啟的頁面是否使用 react 建構而成
以及產生提示,如果要部屬到線上時要先經過 use the production build 建構專案

按 f12 ,打開開發者工具,選擇 Components 頁籤,
就可以看到 components 彼此間的層級關係
以及該 component 的 props 跟 states 的資訊


另外 Profiler 頁籤可以查看 react專案 進行渲染時的過程及耗費的資源
進而對效能進一步的修正


上一篇
react 大冒險-prop / state & defaultProps-day 10
下一篇
react 大冒險-顯示當下欄位輸入值的文字段落 state exercise-day 12
系列文
為期 30 天的 react 大冒險30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言